<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

	<link rel="stylesheet" type="text/css" href="css/pid-toolbar.css" >

	<style>
        * {
            margin:0;
            padding:0;
        }
       
	   
    </style>
</head>
<body style="margin:50px;">
<!-- 主视图区域 -->
    <div style="width:700px;height:600px;padding:10px;border:2px solid green;">
       
	   
	   <!-- toolbar全局手柄 -->
	   <div class="toolbar toolbar-horizontal" style="">
	   
			<!-- 工具箱--顶部 -->
			<a class="toolbar-head" title="收起" >
				<div class="bag-close"></div>
			</a>
			
			<!-- 工具箱--底部功能区 -->
			<div  class="toolbar-container" style="">
					<div style="margin: 4px auto auto 12px;">
				
							<div class="toolbar-item" style="">
								<a title="复位" href="javascript:void(0)"  name="复位" class="toolbar-btn">
									<div class="toolbar-icon recover-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="平移" href="javascript:void(0)"  name="平移" class="toolbar-btn">
									<div class="toolbar-icon hand-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="隐藏" href="javascript:void(0)"  name="隐藏" class="toolbar-btn">
									<div class="toolbar-icon hidemodel-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="隐藏其他" href="javascript:void(0)"  name="隐藏其他" class="toolbar-btn">
									<div class="toolbar-icon hideothers-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="模型变色" href="javascript:void(0)"  name="模型变色" class="toolbar-btn">
									<div class="toolbar-icon changecolor-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="截图" href="javascript:void(0)"  name="截图" class="toolbar-btn">
									<div class="toolbar-icon cut-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="云线" href="javascript:void(0)"  name="云线" class="toolbar-btn">
									<div class="toolbar-icon cloud-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="文字批注" href="javascript:void(0)"  name="文字批注" class="toolbar-btn">
									<div class="toolbar-icon note-close"></div>
								</a>
							</div>
							<div class="toolbar-item"  style="">
								<a title="线段" href="javascript:void(0)"  name="线段" class="toolbar-btn">
									<div class="toolbar-icon line-close"></div>
								</a>
							</div>
				
					</div>
			</div>
	   </div>

		<div style="height:10px;">
		</div>
		
			
	
    </div>
   
</body>
</html>